<script setup lang="ts">

</script>

<template>
  <el-card header="嵌套路由" class="mb-4">
    <p>定义</p>
    <pre v-highlight><code class="javascript">{
    path: '/user-info',
    name: '用户中心',
    component: UserInfo,
    children: [
        {
            path: 'order',
            name: '订单信息',
            component: UserOrder,
        }, {
            path: 'account',
            name: '帐户信息',
            component: UserAccount,
        },
    ]
},</code></pre>
  </el-card>

  <el-card class="mb-4" header="默认子路由">
    <pre v-highlight><code class="javascript">{
path: '/user-info',
name: '用户中心',
component: UserInfo,
children: [
    {
        path: '',//默认子路由空，则打开父路由时自动打这个子路由
        name: '帐户信息',
        component: UserAccount,
    },
    {
        path: 'order',
        name: '订单信息',
        component: UserOrder,
    },
]
},</code></pre>
  </el-card>

  <el-card header="忽略父组件">
    <pre v-highlight><code class="javascript">const routes = [
  {
    path: '/admin',
    children: [
      { path: '', component: AdminOverview },
      { path: 'users', component: AdminUserList },
      { path: 'users/:id', component: AdminUserDetails },
    ],
  },
]</code></pre>
  </el-card>

</template>

<style scoped>

</style>